| 1 | <HTML> | |
| 2 | <HEAD> | |
| 3 | <TITLE>button rollovers</TITLE> | |
| 4 | ||
| 5 | <SCRIPT LANGUAGE="JavaScript"> | |
| 6 | function swapImage(imgName,newImg){ | |
|
//Defines the function and its parameters (the name of the image as given in //the NAME attribute of the IMG tag, and the new SRC filename). |
||
| 7 | if ((navigator.appName == 'Netscape' && parseFloat(navigator.appVersion) >= 3) || (parseFloat(navigator.appVersion) >= 4)){ | |
|
//Checks that the browser is Netscape and the version number is 3 or //greater OR that the version number is greater than or equal to 4 (the //ability to access and change the SRC property became available //with version 3.0 of Netscape and version 4.0 of Internet Explorer). //JavaScript's built-in parseFloat() function converts the appVersion //string (for example, "3.0 (Macintosh; I; PPC)") to a number ("3.0"). |
||
| 8 | eval('document.' + imgName + '.src = "' + newImg + '"'); | |
|
//JavaScript's built-in eval() function inserts
values for variables, //concatenates strings, and interprets the results. For example, if the user //rolls over the "arts" button, the contents of the parentheses will evaluate //to document.arts.src="arts_highlight.gif". |
||
| 9 | } | |
| 10 | } | |
| 11 | </SCRIPT> | |
| 12 | </HEAD> | |
| 13 | ||
| 14 | <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#990066" VLINK="#660033"> | |
| 15 | ||
| 16 | <A HREF="news/" onMouseOver="swapImage('news','news_highlight.gif')" onMouseOut="swapImage('news','news_atrest.gif')"> | |
|
<!-- The onMouseOver event triggers a call to the swapImage() function and passes it the name of the image (in this case, "news") and the filename of the image to swap in ("news_highlight.gif"). onMouseOut does the same thing, only it passes the original image src. If we didn't have an onMouseOut event that put the original image back, the rollover effect would only work once -- and the buttons would stick in "highlight" mode. --> |
||
| 17 | <IMG NAME="news" SRC="news_atrest.gif" WIDTH=96 HEIGHT=32 ALT="news" BORDER=0> | |
| 18 | </A> | |
| 19 | | |
|
<!-- The code for each of the buttons is broken out onto separate lines for readability, but the buttons themselves all appear on one line in the browser, separated by a non-breaking space. --> |
||
| 20 | <A HREF="sports/" onMouseOver="swapImage('sports','sports_highlight.gif')" onMouseOut="swapImage('sports','sports_atrest.gif')"> | |
|
<!-- Note that the onMouseOver and onMouseOut events apply to the anchor, not the image. This is because the IMG tag only takes the onLoad, onUnload, and onError events. To associate an onMouseOver (or onMouseOut or onClick) event with a non-button image, simply wrap the image in a "nowhere" link (<A HREF="#" onMouseOver"function()"></A>) and set its border equal to zero. --> |
||
| 21 | <IMG NAME="sports" SRC="sports_atrest.gif" WIDTH=96 HEIGHT=32 ALT="sports" BORDER=0> | |
| 22 | </A> | |
| 23 | | |
| 24 | <A HREF="arts/" onMouseOver="swapImage('arts','arts_highlight.gif')" onMouseOut="swapImage('arts','arts_atrest.gif')"> | |
| 25 | <IMG NAME="arts" SRC="arts_atrest.gif" WIDTH=96 HEIGHT=32 ALT="arts" BORDER=0> | |
| 26 | </A> | |
| 27 | | |
| 28 | <A HREF="classifieds/" onMouseOver="swapImage('classifieds','classifieds_highlight.gif')" onMouseOut="swapImage('classifieds','classifieds_atrest.gif')"> | |
| 29 | <IMG NAME="classifieds" SRC="classifieds_atrest.gif" WIDTH=96 HEIGHT=32 ALT="classifieds" BORDER=0> | |
| 30 | </A> | |
| 31 | ||
| 32 | </BODY> | |
| 33 | </HTML> |